import macPng from './mac.png';
import iphonePng from './iphone.png';
import classNames from 'classnames';
import { ConfigProvider } from '@pxxtech/component';

import styles from './index.less';

export const DemoBoth = (props: any) => {
  return (
    <div className={styles.demoBoth}>
      {!!props.webChildren && (
        <div className={styles.item}>
          <div
            className={classNames(styles.demoWebWrap, 'pxx-web')}
            style={{ backgroundImage: `url(${macPng})` }}
          >
            <div className={classNames(styles.demoWeb)}>
              <ConfigProvider classSuffix="web">
                {props.webChildren}
              </ConfigProvider>
            </div>
          </div>
        </div>
      )}
      <div className={styles.item}>
        <div
          className={styles.demoMobileWrap}
          style={{ backgroundImage: `url(${iphonePng})` }}
        >
          <div className={classNames(styles.demoMobile, 'pxx-demo-mobile')}>
            <ConfigProvider classSuffix="mobile">
              {props.mobileChildren}
            </ConfigProvider>
          </div>
        </div>
      </div>
    </div>
  );
};
